<!DOCTYPE html>
<html>
<head>
    <title>报表统计</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js" charset="utf-8"></script>
    <script src="js/echarts.min.js" charset="utf-8"></script>
    <script src="../element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
	<style>
		#test1{
			display: inline-block;
			width: 49%;
			height: 500px;
		}
		#test2{
			display: inline-block;
			width: 49%;
			height: 500px;
		}
        .year{
            display: inline-block;
            margin-left: 14%;
        }
        .month{
            display: inline-block;
            margin-left: 30%;
        }
	</style>
</head>
<body>
    <div id="app">
        <div ref="chart" id="test1" ></div>
		<div ref="charts" id="test2"></div>
        <div class="year">
            <span class="demonstration">请选择年份</span>
            <el-date-picker
                    v-model="year"
                    type="year"
                    value-format="yyyy"
                    @blur="findyear"
                    placeholder="选择年">
            </el-date-picker>
        </div>
        <div class="month">
            <span class="demonstration">请选择月份</span>
            <el-date-picker
                    v-model="month"
                    type="month"
                    value-format="yyyy-M"
                    @blur="findmonth"
                    placeholder="选择月">
            </el-date-picker>
        </div>

    </div>
    <script>
        var Main = {
            mounted() {
                this.year=new Date().getFullYear();
                this.month=new Date().getMonth()+1;
                this.month=this.year+'-'+this.month;
                this.findyear();
                this.findmonth();
            },
            methods:{
                test(){
                    var ad = Math.floor(Math.random() * 12);
                    this.chart = echarts.init(this.$refs.chart);
                    Array.from(this.yeardata).forEach(item => {
                        this.yearlabel.push(item.month+"月");
                        this.yearprice.push(item.price);
                    });
                    this.chart.setOption({
                        title: { text: '年度报表统计' },
                        tooltip: {},
                        xAxis: { data: this.yearlabel},
                        yAxis: {},
                        series: [{
                            name: '数量',
                            type: 'bar',
                            color: this.color[ad],
                            data: this.yearprice
                        }]
                    });
                },
                test1(){
                    var ad = Math.floor(Math.random() * 12);
                    this.chart = echarts.init(this.$refs.charts);
                    Array.from(this.monthdata).forEach(item => {
                        this.monthlabel.push(item.day);
                        this.monthprice.push(item.price);
                    });
                    this.chart.setOption({
                        title: { text: '月度报表统计' },
                        tooltip: {},
                        xAxis: { data: this.monthlabel },
                        yAxis: {},
                        series: [{
                            name: '数量',
                            type: 'bar',
                            color: this.color[ad],
                            data: this.monthprice
                        }]
                    });
                },
                findyear:function (){
                    this.yeardata=[];
                    this.yearlabel=[];
                    this.yearprice=[];
                    axios.get('../report', {params: {op: "findyear",year:this.year}}).then(response => {
                        if(response.data.code>0) {
                            this.yeardata = response.data.data;
                            console.log(this.yeardata);
                            this.test();
                        }else{
                            alert(this.year+"年没有销售信息！！！");
                        }
                    })
                },
                findmonth:function (){
                    this.monthdata=[];
                    this.monthlabel=[];
                    this.monthprice=[];
                    var date=new Date(this.month).toLocaleDateString();
                    let year = date.substring(0, date.indexOf('/'));
                    let month =date.substring(date.indexOf('/')+1,date.lastIndexOf('/'));
                    axios.get('../report', {params: {op: "findmonth",year:year,month:month}}).then(response => {
                        if(response.data.code>0) {
                            this.monthdata = response.data.data;
                            console.log(this.monthdata);
                            this.test1();
                        }else{
                            alert(this.month+"月没有销售信息！！！");
                        }
                    })
                }
            },
            data() {
                return {
                    year:'',
                    month:'',
                    yearmonth:'',
                    chart: null,
                    yearlabel:[],
                    yearprice:[],
                    yeardata:[],
                    monthlabel:[],
                    monthprice:[],
                    monthdata:[],
                    categories: ["1月", "2月", "3月", "4月", "5月", "6月", "2月", "3月", "4月", "5月", "6月"],
                    seriesData: [5, 20, 36, 10, 10, 20],
                    color: ['#ff0000','#00ff00', '#0000ff', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
                };
            }
        };
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')

    </script>
</body>
</html>